<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/1.css">
</head>
<body>
    <!-- 浮动导航条 -->
    <div class="nav">
        <!-- 音乐logo -->
            <img class="music" src="./img/music-little.png" alt="">
        <!-- 导航文字 -->
        <ul class="nav-w">
            <li >首 页</li>
            <li >新 闻</li>
            <li >角 色</li>
            <li >世 界</li>
            <li >漫 画</li>
            <li >社 区</li>    
        </ul>
        <!-- 导航登录 -->
        <span> 登 录</span>
        <img class="login" src="./img/登录.png" alt="">
    </div>


    <!-- 清除定位 -->
    <div style="clear: both;"></div>
    <!-- 主要内容 -->
    <div class="main">
        <!--三图区  -->
        <ul class="pic">
            <!-- 第一个区域 -->
            <li>
                <ul class="pic-1">
                    <li class="pic-img">
                        <img src="./img/img-1.jpg" alt="">
                    </li>
                    <li class="pic-w">
                        《原神》「尘世相逢之约」一周年同人征集活动今日开启"
                    </li>
                    <li class="date">
                        2021/0916<span>新闻</span>
                    </li>
                    
                </ul>
            </li>
            <!-- 第二个区域 -->
            <li>
                <ul class="pic-1">
                    <li class="pic-img">
                        <img src="./img/img-2.jpg" alt="">
                    </li>
                    <li class="pic-w">
                        《原神》提瓦特冒险纪念视频：旅行周年手札
                    </li>
                    <li class="date">
                        2021/0916<span>新闻</span>
                    </li>
                </ul>
            </li>
            <!-- 第三个区域 -->
            <li>
                <ul class="pic-2">
                    <li class="pic-img">
                        <img src="./img/img-3.png" alt="">
                    </li>
                    <li class="pic-w">
                        《原神》来自安柏和芭芭拉的「原神☆FES」邀请！
                    </li>
                    <li class="date">
                        2021/0916<span>新闻</span>
                    </li>
                </ul>
            </li>
        </ul>
        
        <!--下边的盒子排列  -->
        
        <div class="under-box">
            <!-- 小导航 -->
            <ul class="nav-box">
                <li class="nav-box-1">
                    <h3>最佳</h3>
                </li>
                <li class="nav-box-2">
                    <h3>新闻</h3>

                </li>
                <li class="nav-box-2">
                    <h3>公告</h3>

                </li>
                <li class="nav-box-2">
                    <h3>活动</h3>

                </li>

            </ul> 
            <!-- 五小盒子 -->
            <div class="pic-box">
                <div class="pic-box1">
                    <img src="./img/5-1.jpg" alt="">
                </div>
                <div class="pic-box2">
                    <h1>《原神》「飘浮秘灵」活动即将开启</h1>
                    <p>2021/09/17 <span>新 闻</span></p>
                </div>    
            </div>
            <!-- 2 -->
            <div class="pic-box">
                <div class="pic-box1">
                    <img src="./img/5-2.jpg" alt="">
                </div>
                <div class="pic-box2">
                    <h1>「《原神》稻妻篇OST即将于9月22日上线 」</h1>
                    <p>2021/09/17 <span>新 闻</span></p>
                </div>    
            </div>
            <!-- 3 -->
            <div class="pic-box">
                <div class="pic-box1">
                    <img src="./img/5-3.png" alt="">
                </div>
                <div class="pic-box2">
                    <h1>《原神》线下交响音乐会宣传片- 「万籁汇响」</h1>
                    <p>2021/09/17 <span>新 闻</span></p>
                </div>    
            </div>
            <!-- 4 -->
            <div class="pic-box">
                <div class="pic-box1">
                    <img src="./img/5-4.jpg" alt="">
                </div>
                <div class="pic-box2">
                    <h1>《原神》「尘世相逢之约」一周年同人征集活动今日开启</h1>
                    <p>2021/09/16 <span>新 闻</span></p>
                </div>    
            </div>
            <!-- 5 -->
            <div class="pic-box">
                <div class="pic-box1">
                    <img src="./img/5-5.jpg" alt="">
                </div>
                <div class="pic-box2">
                    <h1>《原神》提瓦特冒险纪念视频：旅行周年手札</h1>
                    <p>2021/09/16 <span>新 闻</span></p>
                </div>    
            </div>
            <!-- 尾巴 -->
            <div class="under-footer">
                <h1>加载更多</h1>
            </div>
    <!--上尾巴  -->
    <div class="footer-1">
        <img src="./img/11.png" alt="">
        <img src="./img/12.png" alt="">
        <img src="./img/13.png" alt="">
        <img src="./img/14.png" alt="">
    </div>
    
            
             

        </div>
            



    </ul>
    </div>
    <!-- 尾部 -->
    <div class="foot">
        <div class="foot1">
           
            <img  class="foot-pic1" src="./img/21.png" alt="">
            <img class="foot-w" src="./img/20.png" alt="">
            <img class="foot-pic2" src="./img/22.png" alt="">
            
        </div>
        <div class="foot2">
            <ul class="foot2-1">
                <li> 用户协议 |</li>
                <li> 隐私政策 |</li>
                <li> 家长监护工程 |</li>
                <li> 关于我们 |</li>
                <li> 联系我们 |</li>
                <li> 加入我们 |</li>
    
    
            </ul>
            <ul class="foot2-2">
                <li>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。        </li>
                <li>沪公网安备31010402001113号 | 增值电信业务经营许可证：沪B2-20190555</li>
                <li>沪ICP备19018275号-4 | 沪网文〔2019〕3168-216号 | 国新出审【2019】2978号</li>
                <li>互联网违法不良信息举报邮箱: tousu@mihoyo.com 互联网违法不良信息举报电话: 021-60371750 （工作时间：每天10点 - 20点）</li>
                <li>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听</li>
                <li>未成年成长关爱热线：021-60371740</li>
                <li>© 2020 米哈游版权所有 | 上海米哈游影铁科技有限公司 客服电话：400-666-6312</li>
            </ul>
            <ul class="foot3-3">
                <li><img src="./img/23.png" alt=""></li>
                <li><img src="./img/24.png" alt=""></li>
                <li><img src="./img/25.png" alt=""></li>
                <li><img src="./img/26.png" alt=""></li>
                <li><img src="./img/27.png" alt=""></li>
                <li><img src="./img/28.png" alt=""></li>
               
            </ul>
        </div>
    </div>
    <!-- 尾黑 -->
    <div class="foot--"></div>
    
    </div>
    
</body>
</html>




